<template>
  <view>
    <view v-for="(item, index) in popupList" :key="item.src">
      <su-popup
        v-if="index === currentIndex"
        :show="item.isShow"
        type="center"
        backgroundColor="none"
        round="0"
        :showClose="true"
        :isMaskClick="false"
        @close="onClose(index)"
      >
		<view class="text-box" v-if="item.itemType == 'text'">
			<view class="text-box-title">{{item.title}}</view>
			<scroll-view scroll-y="true" class="text-box-content">
				<rich-text :nodes="item.content"></rich-text>
			</scroll-view>
		</view>
		<view class="text-box" v-else-if="item.itemType == 'version'">
			<view class="text-box-title">{{$t('popuVersion.fxxbb')}}</view>
			<scroll-view scroll-y="true" class="text-box-content">
				<rich-text :nodes="item.content"></rich-text>
			</scroll-view>
			<view class="ss-p-20 bottom-text">
				<view class="ss-flex ss-row-between">
					<text>{{$t('popuVersion.jbb')}}: {{item.oldversion}}</text>
					<text>{{$t('popuVersion.xbb')}}: {{item.newversion}}</text>
				</view>
				<view class="ss-p-y-20">
					<text>{{$t('popuVersion.xzlj')}}：</text>
					<text>{{item.downloadurl}}</text>
				</view>
				
				<button class="ss-reset-button save-btn ui-BG-Main-Gradient ui-Shadow-Main" @tap="onDownloadurl">
				  {{$t('popuVersion.djxz')}}
				</button>
			</view>
		</view>
        <view class="img-box" v-else>
          <image
            class="modal-img"
            :src="sheep.$url.cdn(item.src)"
            mode="widthFix"
            @tap.stop="onPopup(item.url)"
          />
        </view>
      </su-popup>
    </view>
  </view>
</template>

<script setup>
  import sheep from '@/sheep';
  import { computed, ref } from 'vue';
  import { onShow } from '@dcloudio/uni-app';
  import { saveAdvHistory } from '@/sheep/hooks/useModal';
  
  const announcementList = ref(null)
  const versionInfo = ref(null)
  
  function getInfoVersion() {
	  return new Promise((resolve,reject) => {
		  plus.runtime.getProperty(plus.runtime.appid, (info) => {
			resolve(info.version)
		  })
	  })
  }
  
  async function getPopupData() {
	  const res = await Promise.all([sheep.$api.user.versionInfo(), sheep.$api.user.announcement()])
	  
	  // 获取版本号
	  // #ifdef APP-PLUS
	  const infoVersion = await getInfoVersion()
	  // #endif
	  
	  if(res[0].data && res[0].data.id && infoVersion != res[0].data.newversion) {
		versionInfo.value = res[0].data
		versionInfo.value.isShow = true;
		versionInfo.value.itemType = 'version'
	  }
	  if(res[1].data && res[1].data.id) {
		announcementList.value = res[1].data
		announcementList.value.isShow = true;
		announcementList.value.itemType = 'text'
	  }
  }
  getPopupData()
  
  function onDownloadurl() {
	  // #ifdef H5
	  location.href = versionInfo.value.downloadurl
	  // #endif
	  
	  // #ifdef APP-PLUS
	  plus.runtime.openURL(versionInfo.value.downloadurl, (err) => {
	     console.log(err);  
	  })
	  // #endif
  }
  
  // const modalStore = sheep.$store('modal');
  const modalStore = JSON.parse(uni.getStorageSync('modal-store') || '{}');
  const advHistory = modalStore.advHistory || [];
  const currentIndex = ref(0);
  const popupList = computed(() => {
    const list = sheep.$store('app').template.basic?.popupImage?.list || [];
	
    const newList = [];
	
	// #ifdef APP-PLUS
	newList.push(versionInfo.value)
	// #endif
	
	if(announcementList.value) {
		newList.push(announcementList.value)
	}
	
    if (list.length > 0) {
      list.forEach((adv) => {
        if (adv.show === 1 && advHistory.includes(adv.src)) {
          adv.isShow = false;
        } else {
          adv.isShow = true;
          newList.push(adv);
        }
        saveAdvHistory(adv);
      });
    }
    return newList;
  });

  function onPopup(path) {
    sheep.$router.go(path);
  }

  function onClose(index) {
    currentIndex.value = index + 1;
    popupList.value[index].isShow = false;
  }
</script>

<style lang="scss" scoped>
	.text-box {
		width: 610rpx;
		background-color: #fff;
		border-radius: 20rpx;
		
		.text-box-title {
			padding: 20rpx 0;
			text-align: center;
			font-size: 28rpx;
			font-weight: 800;
			border-bottom: 2rpx solid #e5e5e5;
		}
		.text-box-content {
			mim-height: 300rpx;
			max-height: 500rpx;
			padding: 20rpx;
			box-sizing: border-box;
		}
	}
  .img-box {
    width: 610rpx;
    // height: 800rpx;
  }
  .modal-img {
    width: 100%;
    height: 100%;
  }
  
  .bottom-text {
	  color: #666;
  }
</style>
